<!--  通用Table组件，除以下参数外参数使用方式不变 20220301 botao.yu  -->
<!--  @param ref 必输  自定义名称 -->
<!--  @param refId 必输 自定义名称，必须和ref的值保持一致 -->
<!--  @param multiple 非必输  默认多选 true 多选 false 单选 -->
<!--  @param columList 使用列插槽 列保持原来的使用方式声明, 预留columList2、columList3插槽，注意* 不需要再声明selection列 -->
<!--  @param rowClick  原row-click方法、在支持行选中的基础上调用 -->
<!--  @param rowStyle  原row-style方法、在支持行选中的基础上调用 -->

<template>
  <el-table v-bind="$props" :ref="refId" :id="refId"
            highlight-current-row="true"
            stripe="true"
            @row-click="rowClickFun"
            :row-style="rowStyleFun"
  >
    <el-table-column type="selection"  v-if="multiple" width="55" align="center" />
    <slot name="columList"></slot>
    <slot name="columList2"></slot>
    <slot name="columList3"></slot>
  </el-table>
</template>
<script>

export default {
  props: {
    multiple: Boolean,
    rowClick: Function,
    rowStyle: Function,
    refId: String,
    selectionGroupRow: Array,
  },
  watch: {},
  data() {
    return {
      rowClick:this.$props.rowClick,
      rowStyle:this.$props.rowStyle,
      selectionGroupRow:[],
      height:window.innerHeight * 0.80 + 'px',
      multiple:(this.$props.multiple===undefined||this.$props.multiple==='null'||this.$props.multiple==='')?true:(this.$props.multiple==='false'?false:true),
      refId:(this.$props.refId===undefined||this.$props.refId==='null'||this.$props.refId==='')?this.$props.refId:this.$props.refId
    }
  },
  created() {

  },
  methods: {

    //行选中
    rowClickFun(row, column, event) {
      let refsElTable = this.$refs[this.refId]; // 获取表格对象
      let multiple = this.multiple;
      let findRow = this.selectionGroupRow.find(c => c.rowIndex == row.rowIndex);
      if (findRow) {
        refsElTable.toggleRowSelection(row, false);
        refsElTable.setCurrentRow();
        this.lsh.remove(this.selectionGroupRow, function (o) {
          return o.rowIndex === row.rowIndex;
        });
        return;
      }
      if (multiple === true || multiple === 'true') {
      } else {
        refsElTable.setCurrentRow();
        refsElTable.clearSelection();
        this.selectionGroupRow = [];
      }
      this.selectionGroupRow.push(row);
      refsElTable.setCurrentRow(row);
      refsElTable.toggleRowSelection(row); // 调用选中行方法
      if (Object.prototype.toString.call(this.$props.rowClick) === '[object Function]') {
        this.$props.rowClick(row, column, event);
      }

    },
    //选中赋予index
    rowStyleFun({row, rowIndex}) {
      Object.defineProperty(row, 'rowIndex', { //给每一行添加不可枚举属性rowIndex来标识当前行
        value: rowIndex,
        writable: true,
        enumerable: false
      })

      if (Object.prototype.toString.call(this.$props.rowStyle) === '[object Function]') {
        this.$props.rowStyle(row, rowIndex);
      }
    },
    getWindowInfo() {
      const windowInfo = {
        width: window.innerWidth,
        hight: window.innerHeight
      }
      let self = this.$refs[this.refId];
      let parent = this.$parent;
      this.height = window.innerHeight * 0.75 + 'px';
    }
  },
  mounted() {
    // window.addEventListener('resize', this.getWindowInfo);
  }
}
</script>
<script setup>
import {getCurrentInstance, watch} from 'vue'
const {proxy} = getCurrentInstance()

watch(() => proxy.$attrs.data, (nv, ov) => {
  proxy.selectionGroupRow = [];
}, {deep: true})
</script>
